<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    </meta>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </meta>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    </meta>
    <link href="https://fonts.loli.net/css?family=Lato:100,300,400,700,900" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/font-styles.css" />
    <link rel="shortcut icon" href="img/lovely.png" type="image/png">
    <title>Natours | Exciting tours for adventurous people</title>
</head>

<body>
    <div class="navigation">
        <input type="checkbox" id="navi-toggle" class="navigation__check">

        <label for="navi-toggle" class="navigation__button">MENU</label>
    
        <div class="navigation__background">&nbsp;</div>

        <nav class="navigation__nav">
            <ul class="navigation__list">
                <li class="navigation__item"><a href="#" class="navigation__link">About Natours</a></li>
                <li class="navigation__item"><a href="#" class="navigation__link">Your benfits</a></li>
                <li class="navigation__item"><a href="#" class="navigation__link">Popular tours</a></li>
                <li class="navigation__item"><a href="#" class="navigation__link">Stories</a></li>
                <li class="navigation__item"><a href="#" class="navigation__link">Book now</a></li>
            </ul>
        </nav>
    </div>


    <header class="header">
        <div class="header__logo-box">
            <img src="img/logo-white.png" alt="Logo" class="header__logo"></img>
        </div>
        <div class="header__text-box">
            <h1 class="heading-primary">
                <span class="heading-primary__main">Outdoors</span>
                <span class="heading-primary__sub">Is where life happens</span>
            </h1>

            <a href="/reaction-demo.html" class="btn btn-white btn-animated">Discover our tours</a>
        </div>
    </header>

    <main>
        <!-- Emmet 语法 -->
        <section class="section-about">
            <div class="u-center-text u-margin-bottom-big">
                <h2 class="heading-secondary">
                    Exiciting tours for adventurous people
                </h2>
            </div>

            <div class="row">
                <div class="col-1-of-2">
                    <h3 class="heading-tertiary u-margin-bottom-small">YOU'RE GOING TO FALL IN LOVE WITH NATURE</h3>
                    <p class="paragraph">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione iure,commodi in sit neque
                        perspiciatis laudantium omnis nemo doloribus nesciuntad earum debitis aspernatur recusandae est
                        uno dolore!
                    </p>
                    <h3 class="heading-tertiary u-margin-bottom-small">LIVE ADVENTURES LIKE YOU HAVE NEVER BEFORE</h3>
                    <p class="paragraph">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem voluptatesdolore doloribus
                        dolores, vitae soluta eum recusandae consectetur numquam.
                    </p>
                    <a href="#" class="btn-text">Learn More &rarr;</a>
                </div>
                <div class="col-1-of-2">
                    <div class="composition">
                        <img src="img/nat-1.jpg" alt="Photo 1" class="composition__photo composition__photo--p1">
                        <img src="img/nat-2.jpg" alt="Photo 2" class="composition__photo composition__photo--p2">
                        <img src="img/nat-3.jpg" alt="Photo 3" class="composition__photo composition__photo--p3">
                    </div>

                    <!-- <img src="img/nat-1.jpg" alt="img" class="small-img">
                    <img src="img/nat-2.jpg" alt="img" class="small-img">
                    <img src="img/nat-3.jpg" alt="img" class="small-img"> -->
                </div>
            </div>
        </section>
        <section class="section-features">

            <div class="row">
                <div class="col-1-of-4">
                    <div class="feature-box">
                        <i class="feature-box__icon icon-basic-world"></i>
                        <h3 class="heading-tertiary u-margin-bottom-small">Explore the world</h3>
                        <p class="feature-box__text">Lorem ipsum dolor sit amet, Ratione iure,commodi in sit neque
                            perspiciatis laudantium</p>
                    </div>
                </div>
                <div class="col-1-of-4">
                    <div class="feature-box">
                        <i class="feature-box__icon icon-basic-compass"></i>
                        <h3 class="heading-tertiary u-margin-bottom-small">MEET NATURE</h3>
                        <p class="feature-box__text">Impedit doloribus quo odioquos sequi necessitatibus.dolorem neaue
                            labore deleniti.</p>
                    </div>
                </div>
                <div class="col-1-of-4">
                    <div class="feature-box">
                        <i class="feature-box__icon icon-basic-map"></i>
                        <h3 class="heading-tertiary u-margin-bottom-small">FIND YOUR WAY</h3>
                        <p class="feature-box__text">Laboriosam nam hic,earumitaque modi nequeoffcia. corporisnatus
                            ducimus.</p>
                    </div>
                </div>
                <div class="col-1-of-4">
                    <div class="feature-box">
                        <i class="feature-box__icon icon-basic-heart"></i>
                        <h3 class="heading-tertiary u-margin-bottom-small">LIVE A HEALTHIER LIFE</h3>
                        <p class="feature-box__text">Autem est eaque fugiatnesciunt quisquam inventoremolestias, nihil
                            delectussintum harum.</p>
                    </div>
                </div>
            </div>
        </section>
        <section class="section-tours">
            <div class="u-center-text u-margin-bottom-big">
                <h2 class="heading-secondary">
                    Most popular tours
                </h2>
            </div>
            <div class="row">
                <div class="col-1-of-3">
                    <div class="card">
                        <div class="card__side card__side--front">
                            <div class="card__picture card__picture--1">
                                &nbsp;
                            </div>
                            <h4 class="card__heading">
                                <span class="card__heading-span card__heading-span--1">The Sea Explorer</span>
                            </h4>
                            <div class="card__details">
                                <ul>
                                    <li>3 day tours</li>
                                    <li>Up to 30 people</li>
                                    <li>2 tour guides</li>
                                    <li>Sleep in cozy hotels</li>
                                    <li>Difficulty: easy</li>
                                </ul>
                            </div>
                        </div>
                        <div class="card__side card__side--back card__side--back-1">
                            <div class="card__cta">
                                <div class="card__price">
                                    <p class="card__price-only">Only</p>
                                    <p class="card__price-value">$129</p>
                                </div>
                                <a href="#" class="btn btn-white">Book Now!</a>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-1-of-3">
                    <div class="card">
                        <div class="card__side card__side--front">
                            <div class="card__picture card__picture--2">
                                &nbsp;
                            </div>
                            <h4 class="card__heading">
                                <span class="card__heading-span card__heading-span--2">The Forest Hiker</span>
                            </h4>
                            <div class="card__details">
                                <ul>
                                    <li>5 day tours</li>
                                    <li>Up to 40 people</li>
                                    <li>4 tour guides</li>
                                    <li>Sleep in cozy hotels</li>
                                    <li>Difficulty: medium</li>
                                </ul>
                            </div>
                        </div>
                        <div class="card__side card__side--back card__side--back-2">
                            <div class="card__cta">
                                <div class="card__price">
                                    <p class="card__price-only">Only</p>
                                    <p class="card__price-value">$629</p>
                                </div>
                                <a href="#" class="btn btn-white">Book Now!</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-1-of-3">
                    <div class="card">
                        <div class="card__side card__side--front">
                            <div class="card__picture card__picture--3">
                                &nbsp;
                            </div>
                            <h4 class="card__heading">
                                <span class="card__heading-span card__heading-span--3">The Snow Adventure</span>
                            </h4>
                            <div class="card__details">
                                <ul>
                                    <li>7 day tours</li>
                                    <li>Up to 60 people</li>
                                    <li>8 tour guides</li>
                                    <li>Sleep in cozy hotels</li>
                                    <li>Difficulty: hard</li>
                                </ul>
                            </div>
                        </div>
                        <div class="card__side card__side--back card__side--back-3">
                            <div class="card__cta">
                                <div class="card__price">
                                    <p class="card__price-only">Only</p>
                                    <p class="card__price-value">$429</p>
                                </div>
                                <a href="#" class="btn btn-white">Book Now!</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="u-center-text u-margin-top-big">
                <a href="#" class="btn btn-green">Discover all tours</a>
            </div>
        </section>

        <section class="section-stories">
            <div class="bg-video">
                <video class="bg-video__content" autoplay muted loop>
                    <source>
                    <source src="img/video.mp4" type="video/mp4">
                    <source src="img/video.webm" type="video/webm">
                    YOUR BROWSER IS NOT SUPPORTING VIDEO
                    </source>
                </video>
            </div>

            <div class="u-center-text u-margin-bottom-big">
                <h2 class="heading-secondary">
                    We Make people genuinely happy
                </h2>
            </div>

            <div class="row">
                <div class="story">
                    <figure class="story__shape">
                        <img src="img/nat-8.jpg" alt="Person on a tour" class="story__img" />
                        <figcaption class="story__hover-text">Mary smith</figcaption>
                    </figure>
                    <div class="story__text">
                        <h3 class="heading-tertiary u-margin-bottom-small">I had the best week ever with my family </h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione iure,commodi in sit neque
                            perspiciatis laudantium omnis nemo doloribus nesciuntad earum debitis aspernatur recusandae
                            est
                            uno dolore!perspiciatis laudantium omnis nemo doloribus nesciuntad
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="story">
                    <figure class="story__shape">
                        <img src="img/nat-9.jpg" alt="Person on a tour" class="story__img" />
                        <figcaption class="story__hover-text">Jack Willson</figcaption>
                    </figure>
                    <div class="story__text">
                        <h3 class="heading-tertiary u-margin-bottom-small">WOW! My is completely dirrerent now</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione iure,commodi in sit neque
                            perspiciatis laudantium omnis nemo doloribus nesciuntad earum debitis aspernatur recusandae
                            est
                            uno dolore!perspiciatis laudantium omnis nemo doloribus nesciuntad
                        </p>
                    </div>
                </div>
            </div>

            <div class="u-center-text u-margin-top-big">
                <a href="#" class="btn-text">Read all stories &rarr;</a>
            </div>
        </section>

        <section class="section-book">
            <div class="row">
                <div class="book">
                    <div class="book-form">
                        <form action="#" class="form">
                            <div class="u-center-text u-margin-bottom-medium">
                                <h2 class="heading-secondary">
                                    Start booking now
                                </h2>
                            </div>
                            <div class="form__group">
                                <input type="text" class="form__input" placeholder="Full name" id="name" required>
                                <label for="name" class="form__label">Full name</label>
                            </div>
                            <div class="form__group">
                                <input type="email" class="form__input" placeholder="Email address" id="emil" required>
                                <label for="email" class="form__label">Email address</label>
                            </div>
                            <div class="form__group">
                                <div class="form__radio-group">
                                    <input type="radio" id="small" class="form__radio-input" name="type">
                                    <label for="small" class="form__radio-label">
                                        <span class="form__radio-button"></span>
                                        Small tour group
                                    </label>
                                </div>
                                <div class="form__radio-group">
                                    <input type="radio" id="large" class="form__radio-input" name="type">
                                    <label for="large" class="form__radio-label">
                                        <span class="form__radio-button"></span>
                                        Large tour group
                                    </label>
                                </div>
                            </div>
                            <div class="form__group">
                                <button class="btn btn-green">Next Step &rarr;</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
        <section class="footer">
            <div class="footer__logo">
                <img src="img/logo-green-1x.png" alt="Logo" class="footer__logo_img"></img>
            </div>
            <div class="row-big">
                <div class="col-1-of-2-big footer__row-top-border">
                    
                    <ul class="footer__ul">
                        <li class="footer__ul__li"><a href="#" class="footer__link">company</a></li>
                        <li class="footer__ul__li"><a href="#" class="footer__link">constactsus</a></li>
                        <li class="footer__ul__li"><a href="#" class="footer__link">carrers</a></li>
                        <li class="footer__ul__li"><a href="#" class="footer__link">privacypolicy</a></li>
                        <li class="footer__ul__li"><a href="#" class="footer__link">terms</a></li>
                    </ul>
                </div>
                <div class="col-1-of-2-big footer__row-top-border">
                    <p class="footer__text_1">
                        Built by <a href="#" class="footer__link">JONAS SCHMEDTMANN</a> for his online courseADVANCED CSS AND SASs. Copyright © by <a href="#" class="footer__link">Jonas Schmedtmann</a>. You 
                    </p>
                    <p class="footer__text_2">
                        are 100% allowed to use this webpage for both personal andcommercial uses, but not to claim it as your own design. A credit to theoriginal author, Jonas Schmedtmann, is of course always appreciated!    
                    </p>
                </div>
            </div>
        </section>
    </main>

    <!-- 
    <section class="grid-test"> 
        <div class="row">
            <div class="col-1-of-2"> 
                Col 1 of 2
            </div> 
            <div class="col-1-of-2"> 
                Col 1 of 2
            </div>
        </div>

        <div class="row">
            <div class="col-1-of-3"> 
                Col 1 of 3
            </div> 
            <div class="col-1-of-3"> 
                Col 1 of 3
            </div>
            <div class="col-1-of-3"> 
                Col 1 of 3
            </div>
        </div>

        <div class="row">
            <div class="col-1-of-3"> 
                Col 1 of 3
            </div> 
            <div class="col-2-of-3"> 
                Col 2 of 3
            </div>
        </div>

        <div class="row">
            <div class="col-1-of-4"> 
                Col 1 of 4
            </div> 
            <div class="col-1-of-4"> 
                Col 1 of 4
            </div>
            <div class="col-1-of-4"> 
                Col 1 of 4
            </div>
            <div class="col-1-of-4"> 
                Col 1 of 4
            </div>
        </div>

        <div class="row">
            <div class="col-1-of-4"> 
                Col 1 of 4
            </div> 
            <div class="col-1-of-4"> 
                Col 1 of 4
            </div>
            <div class="col-2-of-4"> 
                Col 2 of 4
            </div>
        </div>

        <div class="row">
            <div class="col-1-of-4"> 
                Col 1 of 4
            </div> 
            <div class="col-3-of-4"> 
                Col 3 of 4
            </div>
        </div>
    </section> 
    -->


</body>

</html>